<template>
	<div class="flex">
		<div class="w">
			<van-tabs v-model="$store.state.pageActiveIndex" swipeable sticky animated @change="changeActive" color="#ffd719">
				<van-tab
					v-for="(item, index) in pageLists"
					:key="index"
					:title="item.title || item"
					:to="item.path || `/FoodClassificationList/${item}`"
				>
				</van-tab>
			</van-tabs>
		</div>
	</div>
</template>

<script>
export default {
	name: 'FoodsNavigationBar',
	props: {
		pageList: {
			type: Array,
			default: () => [],
		},
	},
	computed: {
		userPageShow() {
			return this.$store.state.userPageShow;
		},
		pageLists() {
			let obj = [
				{
					title: '今日推荐',
					path: '/',
				},
				{
					title: '排行榜',
					path: '/FoodsTopList',
				},
				{
					title: '打卡圈',
					path: '/UserShare',
				},
				...this.pageList,
			];
			return obj;
		},
	},
	watch: {
		'$store.state.pageActiveIndex': {
			handler(newVal, oldVal) {
				if (this.$route.path == '/') {
					this.$router.push('/');
				} else if (newVal == 0 && oldVal > 2) {
					this.$store.commit('changePageActiveIndex', oldVal);
				}
			},
		},
	},
	activated() {
		this.pageActiveIndex = parseInt(sessionStorage.getItem('pageActiveIndex')) || 0;
	},
	data() {
		return {
			pageActiveIndex: parseInt(sessionStorage.getItem('pageActiveIndex')) || 0,
		};
	},
	methods: {
		/** @method Tab标签切换 */
		changeActive(index) {
			this.$store.commit('changePageActiveIndex', index);
		},
	},
};
</script>

<style scoped>
.flex {
	width: 100%;
	display: flex;
	z-index: 1;
	padding: 10px;
}
.w {
	width: 100%;
}
ul {
	white-space: nowrap;
	overflow-x: auto;
}

ul::-webkit-scrollbar {
	display: none;
}
ul > li {
	display: inline-block;
	padding: 0 15px 0 15px;
	margin-right: 20px;
	border-radius: 20px;
	text-align: center;
}
ul > li > a:active {
	background-color: none;
}
ul > li > a {
	color: #8c9ba7;
}
.checked {
	background: #ffd719;
	border: 1px solid #ffd719;
	color: #fff;
}
.checked_color {
	color: #fff;
}
</style>
